<template>
  <div class="tableTr">
    <div
      class="tableTd"
      :class="{ active: active }"
      v-for="(e, i) in headData"
      :key="i"
      :style="{ width: e.width || getWidth }"
    >
      <slot :item="e">
        <span>{{ e.label }}</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tableTr',
  props: {
    headData: {
      type: Array,
      default: () => [],
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getWidth() {
      return `${100 / this.headData.length}%`;
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.tableTr {
  width: 100%;
  .tableTd {
    height: 48px;
    display: inline-flex;
    align-items: center;
    padding-left: 20px;
  }
  .active,
  &:hover {
    background-color: #eee;
  }
}
</style>
